<template>
	<view class="container" v-if="isLogin">


		<view class="chatBc">
			<image class="img" :src="$c.config.media + 'yuemini/reg_bg.png'" mode="aspectFill"></image>
			<!-- 	<image v-if="info.pic" class="img" :src="info.pic" mode="aspectFill"></image> -->
			<!-- <image v-else class="img" src="../../statics/images/moreImg.png" mode="aspectFill"></image> -->
		</view>
		<view class="navigation-box" style="background:none;">
			
			<view :style="{height:heigh + 'px'}">
			</view>
			<view class="flex_r fa_c navigation">
				
				<view class="navigation-icon" @click="to()">
					<!-- <image class="img" src="./img/ic_back_white.png" mode="aspectFit"></image> -->
					<image class="img" src="" mode="aspectFill"></image>
				</view>
				<view class="flex1 icon_ navigation-title" style="color:#fff;">
					{{info.nick}}
				</view>
				<!-- <view class="navigation-icon" @click="nameTo">
					<image style="width:44rpx; height:34rpx;" class="img" mode="aspectFit"
						:src="$c.config.media + 'mini/user/diandiandian.png'"></image>
				</view> -->
			</view>
		</view>
		<!-- <view v-if="isWXflag==true" style="height: 100rpx;"></view>	
		<view v-else :style="{top:`${$store.state.StatusBar.statusBar + 80}` + 'px'}"></view> -->
		
		<view class="infr" :style="{top:`${80+heigh}` + 'px'}"  v-if="userid">			
			<view class="flex_r fa_c infr-top">
				<view class="infr-top-img" @click="nameTo">
					<image class="img" mode="aspectFill" :src="info.pic"></image>
				</view>
				<view class="flex1">
					<view class="text_34" style="color: #fff;">
						{{info.nick}}
					</view>
					<view class="flex_r label">
						<view class="text_22 label-item" v-if="index <4" v-for="(item,index) in info.biaoqianList">
							{{item}}
						</view>
					</view>
					<view class="text_22" style="color: #fff;">
						{{info.age}}岁
					</view>
				</view>
			</view>
			<view class="flex_r infr-botton">
				<view class="infr-img" v-for="(item,index) in images" @click="previewImage(item)">
					<image class="img" mode="aspectFill" :src="item"></image>
				</view>
			</view>
		</view>

		<!-- 小程序视频通话 -->
		<!--  #ifdef  MP-WEIXIN -->
		<tuicalling ref="TUICalling" id="TUICalling-component" :config="config"></tuicalling>
		<!--  #endif -->
		<!-- 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID -->
		<!-- <view class="tui-chatroom-navigatorbar" v-if="conversation.type === 'GROUP'"></view> -->
		<view class="group-profile">
			<TUI-group-profile id="groip-profile" v-if="isShow" :conversation="conversation"></TUI-group-profile>
		</view>
		<view class="message-list" @tap="triggerClose">
			<TUI-message-list ref="messageList" id="message-list" :conversation="conversation"></TUI-message-list>
		</view>
		<view class="container-box" v-if="videoPlay" @tap.stop="stopVideoHander">
			<video class="video-message" v-if="videoPlay" :src="videoMessage.payload.videoUrl"
				:poster="videoMessage.payload.snapshotUrl" object-fit="cover" error="videoError" autoplay="true"
				direction="0"></video>
		</view>
		<view class="z_index2 message-input" v-if="showChat" style="background:none;">
			<TUI-message-input ref="messageInput" id="message-input" :conversation="conversation"
				@sendMessage="sendMessage" @handleCall="handleCall"></TUI-message-input>
		</view>
	</view>
</template>

<script>
	import TUIMessageList from '../components/tui-chat/message-list/index';
	import TUIMessageInput from '../components/tui-chat/message-input/index';
	import TUIGroupProfile from '../components/tui-group/group-profile/index';

	// import { TUICallKit, TUICallKitServer, VideoDisplayMode, VideoResolution, STATUS } from "@tencentcloud/call-uikit-vue2.6";
	import {
		to
	} from '@/utils/index.js';
	// console.log("=======",TUICallKit,"======")
	export default {
		data() {
			return {
				$c: this.$c,
				// $store:this.$store,
				userid: 0,
				isWXflag:false,
				heigh:50,
				list: [],
				images: [],
				info: {
					pic: ''
				},
				conversationName: '',
				conversation: {},
				messageList: [],
				isShow: false,
				showChat: true,
				conversationID: '',
				videoPlay: false,
				videoMessage: {},
				config: {
					sdkAppID: uni.getStorageSync('sdkAppID'),
					userID: uni.getStorageSync('userID'),
					userSig: uni.getStorageSync('userSig'),
					type: 1,
					tim: null
				},
				friendList: '',
				options: ''
			};
		},

		components: {
			TUIMessageList,
			TUIMessageInput,
			TUIGroupProfile
		},
		props: {},
		created() {
			uni.$on('videoPlayerHandler', value => {
				this.videoPlay = value.isPlay;
				this.videoMessage = value.message;
			});
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin;
			}
		},
		watch: {
			isLogin(val) {
				if (val) {
					this.getMsg();
				}
			}
		},
		/**
		 * 生命周期函数--监听页 面加载
		 */
		onLoad(options) {
			// #ifdef APP-PLUS			
			this.heigh = this.$store.state.StatusBar.statusBar; 
			// #endif
			this.options = options;
			if (this.isLogin) {
				this.getMsg();
			}
		},
		onShow() {	
			getApp().menpiaoData();
		},
		methods: {
			to,
			async getInfo() {
				let res = await this.$c.post("/app/user/lookTinfo?userid=" + this.userid)
				if (res.code == 0) {
					this.info = res.data
					if (this.info.xingxiang) {
						let xingxiang = this.info.xingxiang.split(',');
						for (let item of xingxiang) {
							if (item != '') {
								this.images.push(item)
							}
						}
					}
					this.guanzhuState = this.info.guanzhuState;
				}
			},
			getMsg() {
				this.getFriendList();
				// #ifdef  MP-WEIXIN
				// 初始化 小程序视频通话 TUICalling
				this.config = {
					sdkAppID: uni.getStorageSync('sdkAppID'),
					userID: uni.getStorageSync('userInfo').userID,
					userSig: uni.getStorageSync('userInfo').userSig
				};
				this.$nextTick(() => {
					this.$refs.TUICalling.init();
				});
				// #endif

				const {
					conversationID,
				} = this.options;
				// this.userid = userid
				// console.log("=======",this.userid,conversationID,"=========")
				// if(this.userid){
				// 	this.getInfo()
				// }
				this.conversationID = conversationID;
				uni.$TUIKit
					.setMessageRead({
						conversationID
					})
					.then(() => {}).catch((err) => {
						console.log(err)
					});
				uni.$TUIKit.getConversationProfile(conversationID).then(res => {
					const {
						conversation
					} = res.data;
					this.userid = conversation.userProfile.userID
					this.getInfo()

					this.conversation = conversation;
					console.log(this.conversation)
					uni.setNavigationBarTitle({
						title: this.getConversationName(conversation)
					});
					this.setData({
						conversationName: this.getConversationName(conversation),
						isShow: conversation.type === 'GROUP'
					});
				});
			},
			previewImage(src) {
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接
					urls: this.images,
				});
			},
			nameTo() {
				// this.pageUrl();
				to('/pages/m-pages/m-user-info/index?userid=' + this.userid)
			},
			pageUrl() {
				const num = this.conversationID.slice(0, 3);
				const list = this.friendList;
				// 跳转好友信息页面
				if (num === 'C2C') {
					const ID = this.conversationID.substring(3);
					const id = list.some(item => item.userID == ID);
					if (id === true) {
						let promise = uni.$TUIKit.getFriendProfile({
							userIDList: [ID]
						});
						promise
							.then(function(imResponse) {
								const {
									friendList,
									failureUserIDList
								} = imResponse.data;
								friendList.forEach(friend => {
									// Friend 对象
								});
								// 失败的 userIDList
								failureUserIDList.forEach(item => {
									const {
										userID,
										code,
										message
									} = item;
								});
								var id = friendList[0].userID;
								var avatar = friendList[0].profile.avatar;
								var remark = friendList[0].remark;
								uni.navigateTo({
									url: '/im/information/information?id=' + id + '&url=' + avatar +
										'&remark=' + remark + '&index=1'
								});
							})
							.catch(function(imError) {
								console.warn('getFriendProfile error:', imError); // 获取失败
							});
					} else {
						let promise = uni.$TUIKit.getUserProfile({
							userIDList: [ID] // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
						});
						promise
							.then(function(imResponse) {
								// 存储用户资料的数组 - [Profile]
								const userID = imResponse.data;
								for (var i = 0; i < userID.length; i++) {
									var id = userID[i].userID;
									var avatar = userID[i].avatar;
									var nick = userID[i].nick;
								}
								console.log(userID)
								uni.navigateTo({
									url: '/im/information/information?id=' + id + '&url=' + avatar + '&nick=' +
										nick + '&index=2'
								});
							})
							.catch(function(imError) {
								console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
							});
					}
				}

				// 跳转群聊信息页面
				if (num === 'GRO') {
					const group = this.conversationID.substring(5);
					uni.navigateTo({
						url: '/im/information/groupInfo?id=' + group
					});
				}
			},
			onNavigationBarButtonTap() {
				this.pageUrl();
			},
			stopVideoHander() {
				this.videoPlay = false;
			},
			getFriendList() {
				let promise = uni.$TUIKit.getFriendList();
				promise
					.then(imResponse => {
						const friendList = imResponse.data; // 好友列表
						this.friendList = friendList;
					})
					.catch(function(imError) {
						console.warn('getFriendList error:', imError); // 获取好友列表失败的相关信息
					});
			},
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					this.setData({
						showChat: false
					});
					return '系统通知';
				}

				if (conversation.type === 'C2C') {
					return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
				}

				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.name || conversation.groupProfile.groupID;
				}
			},
			async handleCall(val) {
				console.log(val.detail.userID, '通话id');
				let res = await this.$c.post("/app/user/isEnoughVideoAndVoice?tengxuncode=" + val.detail.userID +
					"&type=" + Number(val.detail.type))
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				console.log(val.detail.type, '通话类型');
				// console.log("=======",TUICallKit,"======")
				// 小程序通话
				// #ifdef  MP-WEIXIN
				this.$refs.TUICalling.call({
					userID: val.detail.userID,
					type: val.detail.type
				});
				// #endif

				// #ifdef  H5
				// await TUICallKitServer.call({
				// 		userID: val.detail.userID,
				// 		type: Number(val.detail.type)
				// 	},
				// 	res => {
				// 		if (res.code === 0) {
				// 			let type = Number(val.detail.type) == 1 ? 2 : 3;
				// 			this.$c.post("/app/user/feeDeduction?txCode="+val.detail.userID+"&type="+type)
				// 			console.log('call success');
				// 		} else {
				// 			console.log(`${res.msg}`);
				// 		}
				// 	}
				// );
				// #endif

				// APP通话
				// #ifdef  APP-PLUS
				console.log('callMediaType', Number(val.detail.type));
				uni.$TUICallKit.call({
						userID: val.detail.userID,
						callMediaType: Number(val.detail.type)
					},
					res => {
						if (res.code === 0) {
							let type = Number(val.detail.type) == 1 ? 2 : 3;
							this.$c.post("/app/user/feeDeduction?txCode=" + val.detail.userID + "&type=" + type)
							console.log('call success');
						} else {
							console.log(`${res.msg}`);
						}
					}
				);
				// #endif
			},
			sendMessage(event) {

				// 将自己发送的消息写进消息列表里面
				this.$refs.messageList.updateMessageList(event.detail.message);
			},

			triggerClose() {
				if (this.showChat) {
					this.$refs.messageInput.handleClose();
				}
			},

			goBack() {
				const pages = getCurrentPages(); // 当前页面栈

				if (pages[pages.length - 2].route === '/im/conversation/create-conversation/create' || pages[pages.length -
						2]
					.route === 'pages/TUI-Group/create-group/create' || pages[pages.length - 2].route ===
					'pages/TUI-Group/join-group/join') {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

				uni.$TUIKit
					.setMessageRead({
						conversationID: this.conversationID
					})
					.then(() => {});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.navigation-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		background-color: rgba(255, 255, 255, .8);

		.navigation {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 80rpx;
			width: 100%;

			.navigation-icon {
				width: 40rpx;
				height: 40rpx;
				// background-color: #999;
			}
		}
	}


	.infr {
		position: absolute;
		left: 20rpx;
		z-index: 2;
		box-sizing: border-box;
		padding: 20rpx;
		width: calc(100% - 40rpx);
		
		background-color: rgba(255, 255, 255, 0.06);
		border-radius: 20rpx;

		.infr-top {
			width: 100%;
			margin-bottom: 20rpx;

			.infr-top-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;
				background-color: #999;
			}

			.label {
				width: 100%;
				margin: 6rpx 0;

				.label-item {
					box-sizing: border-box;
					height: 44rpx;
					margin: 2rpx;
					padding: 0 20rpx;
					line-height: 44rpx;
					border-radius: 20rpx;
					background-color: #e9e9e9;
				}
			}
		}


		.infr-botton {
			width: 100%;

			.infr-img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}

	}





	.chatBc {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		// filter: blur(10px);
	}

	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.tui-chatroom-navigatorbar {
		position: relative;
		flex-shrink: 0;
		height: 90rpx;
	}

	.tui-chatroom-navigatorbar-back {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		left: 24rpx;
		bottom: 20rpx;
	}

	.conversation-title {
		position: absolute;
		width: 350rpx;
		height: 88rpx;
		line-height: 56rpx;
		font-size: 36rpx;
		color: #ffffff;
		z-index: 100;
		bottom: 0;
		left: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.message-list {
		flex: 1;
		width: 100vw;
		overflow-y: scroll;
	}

	.message-input {
		flex-shrink: 0;
		width: 100%;
	}

	.calling {
		position: fixed;
		z-index: 199;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		bottom: 0;
		right: 0;
	}

	.group-profile {
		z-index: 1111;
	}

	.container-box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.video-message {
		width: 90vw;
		height: 300px;
	}
</style>